<template>
  <div ref="portalTable" class="portalTable" :style="cPortalTable" :class="{singleSelectionCls:singleSelection}">
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%;"
      :height="height"
      :cell-style="tableCellStyle"
      border
      :row-key="(row)=>{ return row.id}"
      :header-cell-style="tableHeaderCellStyle"
      highlight-current-row
      @row-click="rowClickFun"
      @select="handleSelectionChange"
    >
      <el-table-column
        v-if="hasSelection"
        type="selection"
        width="55"
        align="center"
        :reserve-selection="true"
        fixed
      />
      <el-table-column v-if="hasIndex" type="index" width="55" label="序号" align="center" fixed />
      <template v-for="item in columnData">
        <el-table-column
          v-if="!item.hidden"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :align="item.align"
          :fixed="item.fixed"
          show-overflow-tooltip
        >
          <template slot-scope="{row,$index}">
            <slot v-if="item.isTemplate">
              <slot
                :name="item.prop"
                :data="{row:row,props:item.prop,index:$index}"
              >{{ row[item.prop] }}</slot>
            </slot>
            <slot v-else>{{ row[item.prop] }}</slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import tableMixins from './tableMixins'
export default {
  name: 'PortalTable',
  mixins: [tableMixins],
  props: {
    hasSelection: {
      type: Boolean,
      default: false
    },
    hasIndex: {
      type: Boolean,
      default: false
    },
    height: {
      type: [Number, String],
      default: '100%'
    },
    tableData: {
      type: Array,
      default: () => []
    },
    columnData: {
      type: Array,
      default: () => []
    },
    singleSelection: { // 是否单选
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      multipleSelection: [] // 选择的数组
    }
  },
  computed: {
    cPortalTable() {
      if (!this.height) {
        return 200
      }
      const height = this.height.toString()
      return {
        height: height.indexOf('%') > -1 ? this.height : height + 'px'
      }
    }
  },
  methods: {
    // 清除选中状态
    clearSelection() {
      this.$refs.multipleTable.clearSelection()
    },
    // 设置选中状态
    setSelectionData(row) {
      this.$refs.multipleTable.toggleRowSelection(row, true)
    },
    rowClickFun(row, column, event) {
      if (!this.singleSelection) { // 多选
        console.log('xxx')
        const isHave = this.multipleSelection.some(v => v.id === row.id) // 判断是否存在选中的数组里面
        // this.$refs.multipleTable.toggleRowSelection(row, true);
        if (isHave) {
          this.$refs.multipleTable.toggleRowSelection(row, false)
          const index = this.multipleSelection.findIndex(v => v.id === row.id)
          this.multipleSelection.splice(index, 1)
        } else {
          this.$refs.multipleTable.toggleRowSelection(row, true)
          this.multipleSelection.push(row)
        }
      } else { // 单选
        this.$refs.multipleTable.clearSelection()
        if (this.multipleSelection.length === 0) {
          this.$refs.multipleTable.toggleRowSelection(row, true)
          this.multipleSelection = [row]
        } else {
          const isHave = this.multipleSelection.some(v => v.id === row.id) // 判断是否存在选中的数组里面
          if (isHave) {
            this.$refs.multipleTable.toggleRowSelection(row, false)
            this.multipleSelection = []
          } else {
            this.$refs.multipleTable.toggleRowSelection(row, true)
            this.multipleSelection = [row]
          }
        }
      }
      this.$emit('rowClick', { row, column, event, multipleSelection: this.multipleSelection })
    },
    // 点击变化
    handleSelectionChange(val, row) {
      if (this.hasSelection) {
        if (!this.singleSelection) { // 如果是多选的情况
          this.multipleSelection = val
        } else { // 如果是单选的情况
          this.$refs.multipleTable.clearSelection()
          if (val.length === 0) {
            this.multipleSelection = []
          } else {
            this.$refs.multipleTable.toggleRowSelection(row, true)
            this.multipleSelection = [row]
          }
        }
        this.$emit('selectFun', this.multipleSelection)
      }
    },
    // 双击某个单元格
    cellDblclick(row, column, cell, event) {
      this.$emit('cell-dblclick', { row, column, cell, event })
    },
    // 双击某行
    rowDblclick(row, column, event) {
      this.$emit('rowDblclick', { row, column, event })
    },
    // 设置滚动条的高度
    setScrollTop(top) {
      if (this.dom) {
        this.dom.scrollTop = top
      }
    },
    // 调用重新布局的方法
    doLayout() {
      this.$refs.multipleTable.doLayout()
    }
  }
}
</script>

<style lang="less">
.portalTable {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #fff;
  }
  ::-webkit-scrollbar-thumb {
    // border-radius:5px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  // &.singleSelectionCls{
  //    /deep/ .el-table{
  //       .el-table__header-wrapper{
  //         .el-table__header{
  //           .has-gutter{
  //             .el-checkbox{
  //             display:none;
  //           }
  //           }

  //         }
  //     }
  //   }
  // }
  /deep/ .el-table {
    width: 99.9% !important;
    .el-table__header{
      .el-checkbox{
        display:none;
      }
    }
    .cell {
      height: 40px;
      line-height: 40px;
      cursor: pointer;

    }
    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 40px !important;

    }
    // .el-table__body tr,
    // .el-table__body td {
    //   padding: 0;
    //   height: 40px;
    // }
  }
}
</style>
